<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="admin/layuiadmin/layui/css/layui.css" media="all">
</head>
<body>
	<!-- 	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>高级应用：制作一个多文件列表</legend>
	</fieldset>
 -->

	<from class="layui-form" action="">

	<div class="layui-form-item">
		<label class="layui-form-label">标题</label>
		<div class="layui-input-block">
			<input type="text" name="title" id="title" lay-verify="title" autocomplete="off"
				placeholder="请输入标题" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">内容</label>
		<div class="layui-input-block">
			<textarea placeholder="请输入内容" class="layui-textarea" name="desc"
				id="desc"></textarea>
		</div>
	</div>

	<div class="layui-form-item" style="display: none;">
		<div class="layui-input-block">
			<input type="text" name="url" id="url" lay-verify="title"
				autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-upload">
		<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
		<div class="layui-upload-list">
			<table class="layui-table">
				<thead>
					<tr>
						<th>文件名</th>
						<th>大小</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="demoList"></tbody>
			</table>
		</div>
		<button type="button" class="layui-btn" lay-submit=""
			lay-filter="demo1" id="testListAction">开始上传</button>
	</div>
	</from>
	<script src="admin/layuiadmin/layui/layui.js" charset="utf-8"></script>

	<script>
		layui
				.use(
						[ 'upload', 'form' ],
						function() {
							var $ = layui.jquery, upload = layui.upload;
							var form = layui.form;
							//多文件列表示例
							var demoListView = $('#demoList'), uploadListIns = upload
									.render({
										elem : '#testList',
										url : 'traapi/url',
										accept : 'file',
										multiple : true,
										auto : false,
										bindAction : '#testListAction',
										choose : function(obj) {
											var files = this.files = obj
													.pushFile(); //将每次选择的文件追加到文件队列
											//读取本地文件
											obj
													.preview(function(index,
															file, result) {
														var tr = $([
																'<tr id="upload-'+ index +'">',
																'<td>'
																		+ file.name
																		+ '</td>',
																'<td>'
																		+ (file.size / 1014)
																				.toFixed(1)
																		+ 'kb</td>',
																'<td>等待上传</td>',
																'<td>',
																'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
																'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
																'</td>',
																'</tr>' ]
																.join(''));

														//单个重传
														tr
																.find(
																		'.demo-reload')
																.on(
																		'click',
																		function() {
																			obj
																					.upload(
																							index,
																							file);
																		});

														//删除
														tr
																.find(
																		'.demo-delete')
																.on(
																		'click',
																		function() {
																			delete files[index]; //删除对应的文件
																			tr
																					.remove();
																			uploadListIns.config.elem
																					.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
																		});

														demoListView.append(tr);
													});
										},
										done : function(res, index, upload) {
											if (res.code == 0) { //上传成功
												var tr = demoListView
														.find('tr#upload-'
																+ index), tds = tr
														.children();
												tds
														.eq(2)
														.html(
																'<span style="color: #5FB878;">上传成功</span>');
												tds.eq(3).html(''); //清空操作
												console.log(res);
												$("#url").attr('value',
														res.filepath);
												//监听提交
												/* form
														.on(
																'submit(demo1)',
																function(data) {
																	layer
																			.alert(
																					JSON
																							.stringify(data.field),
																					{
																						title : '最终的提交信息'
																					})
																	return false;
																}); */
												$
														.ajax({
															url : 'traapi/travels',
															type : "post",
															data : {
																"desc" : $(
																		"#desc")
																		.val(),
																"url" : $(
																		"#url")
																		.val(),
																"title" : $("#title").val(),
																"userid" : 1
															},
															success : function(
																	cm) {
																layer.msg(cm.msg);
															}
														})
												return delete this.files[index]; //删除文件队列已经上传成功的文件
											}
											this.error(index, upload);
										},
										error : function(index, upload) {
											var tr = demoListView
													.find('tr#upload-' + index), tds = tr
													.children();
											tds
													.eq(2)
													.html(
															'<span style="color: #FF5722;">上传失败</span>');
											tds.eq(3).find('.demo-reload')
													.removeClass('layui-hide'); //显示重传
										}
									});
							/* upload.render({
								elem : '#test20',
								url : '/upload/',
								done : function(res) {
									console.log(res)
								}
							}); */
						})
	</script>
</body>
</html>